<!--
 * @Author: your name
 * @Date: 2021-07-13 19:26:25
 * @LastEditTime: 2021-07-15 19:19:53
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \ecjtuNews\src\views\KongMuHu.vue
-->
<template>
      <div>
       <div class="main">
           <!-- 头部 -->
           <div class="top">
           <div class="KongMuHu-logo">
               <a href="">
                   <img src="/images/KongMuHu-logo.jpg" alt="logo图片">
               </a>
           </div>
           <div class="empty"></div>
           </div>
           <!-- /头部 -->
           <!-- 菜单 -->
           <div class="menu">
               <div class="nav">
                   <ul>
                       <li><a href=""><span>交大首页</span></a></li>
                       <li><a href=""><span>首页</span></a></li>
                       <li><a href=""><span>讲坛简介</span></a></li>
                       <li><a href=""><span>在线讲座</span></a></li>
                       <li><a href=""><span>讲座新闻</span></a></li>
                       <li><a href=""><span>讲座预告</span></a></li>
                       <li><a href=""><span>内容整理</span></a></li>
                       <li><a href=""><span>现场风采</span></a></li>
                       <li><a href=""><span>讲坛团队</span></a></li>
                   </ul>
               </div>
           </div>
           <!-- 菜单 -->
           <!-- 内容 -->
           <div class="main-body">
               <!-- 左侧内容 -->
               <div class="main-body-left">
                   <div class="announcement">
                       <div class="announcement-frog-1"><i class="HD"><img src="/images/HD.png" alt=""></i><span>活动公告</span></div>
                       <div class="announcement-frog-2">
                           <table>
                               <tbody>
                                   <tr>
                                       <div class="announ">
                                            <div class="laba"></div>
                                            <div class="announ_content">
                                                <div class="announ_title"></div>
                                                <div class="announ_date"></div>
                                            </div> 
                                        </div> 
                                   </tr>
                                   <tr>
                                    <div class="announ">
                                        <div class="laba"></div>
                                        <div class="announ_content">
                                            <div class="announ_title"></div>
                                            <div class="announ_date"></div>
                                        </div> 
                                    </div> 
                                   </tr>
                               </tbody>
                           </table>
                       </div>
                   </div>
                   <div class="audio">
                       <div class="audio_tu"></div>
                       <div class="audio_content">
                           <table>
                               <tr>
                                   <div class="audio_aud">
                                    <div class="audio_title"></div>
                                    <div class="audio_date"></div>
                                    </div>
                               </tr>
                               <tr>
                                    <div class="audio_aud">
                                        <div class="audio_title"></div>
                                        <div class="audio_date"></div>
                                    </div>
                               </tr>
                               <tr>
                                    <div class="audio_aud">
                                        <div class="audio_title"></div>
                                        <div class="audio_date"></div>
                                    </div>
                               </tr>
                               <tr>
                                    <div class="audio_aud">
                                    <div class="audio_title"></div>
                                    <div class="audio_date"></div>
                                    </div>
                               </tr>
                               <tr>
                                <div class="audio_aud">
                                    <div class="audio_title"></div>
                                    <div class="audio_date"></div>
                                    </div>
                               </tr>
                               <tr>
                                <div class="audio_aud">
                                    <div class="audio_title"></div>
                                    <div class="audio_date"></div>
                                    </div>
                               </tr>
                               <tr>
                                <div class="audio_aud">
                                    <div class="audio_title"></div>
                                    <div class="audio_date"></div>
                                    </div>
                               </tr>
                               <tr>
                                <div class="audio_aud">
                                    <div class="audio_title"></div>
                                    <div class="audio_date"></div>
                                    </div>
                               </tr>
                               <tr>
                                <div class="audio_aud">
                                    <div class="audio_title"></div>
                                    <div class="audio_date"></div>
                                    </div>
                               </tr>
                               <tr>
                                <div class="audio_aud">
                                    <div class="audio_title"></div>
                                    <div class="audio_date"></div>
                                    </div>
                               </tr>
                               <tr>
                                <div class="audio_aud">
                                    <div class="audio_title"></div>
                                    <div class="audio_date"></div>
                                    </div>
                               </tr>
                               <tr>
                                <div class="audio_aud">
                                    <div class="audio_title"></div>
                                    <div class="audio_date"></div>
                                    </div>
                               </tr>
                           </table>
                       </div>
                       <div class="audio_more">
                           <a href="#">
                              <span>
                                <img src="/images/icon_more_1.gif" alt="">
                              </span>
                           </a>
                       </div>
                   </div>
                   <div class="microblog">
                       <div class="mic_blog">
                            <div class="mic_blog_logo"></div>
                            <div class="mic_blog_title"></div>
                       </div>
                       <div class="mic_weibo">
                           <div class="mic_weibo_logo"></div>
                           <div class="mic_weibo_title"></div>
                           <div class="mic_weibo_gz"></div>
                           
                       </div>
                       <div class="mic_interact">

                       </div>
                       <div class="mic_fans"></div>
                   </div>
                   <div class="microblog-frog"><span>---------------友情链接---------------</span></div>
               </div>
               <!-- /左侧内容 -->
               <!-- 右侧内容 -->
               <div class="main-body-right">
                   <div class="banner">
                       <div class="banner-frog-1"><i><img src="/images/RQ.png" alt=""></i><span>现场风采</span></div>
                       <!-- 轮播图 -->
                       <div class="banner-frog-2">
                            <el-carousel :interval="5000" arrow="always">
                           <el-carousel-item v-for="item in 5" :key="item">
                           <img src="/images/L1.jpg" alt="">
                           
                           </el-carousel-item>
                           </el-carousel>
                       </div>
                       <!-- /轮播图 -->
                   </div>
                   <div class="notice">
                       <div class="notice-frog-1"><i><img src="/images/H.png" alt=""></i><span>讲坛预告</span></div>
                       <div class="notice-frog-2">
                           <div class="tu">
                                <img src="/images/WC.jpg" alt="" width="100%">
                           </div>
                           <div class="text">
                               <div class="text-title"><p>魏超教授和大家谈谈心理学</p></div>
                               <div class="text-content">
                                    <span>第552期孔目湖讲坛讲―题:心理学与我一一用理论指导实践主讲人:武汉理工大学教授、国家二级心理咨询师... </span>
                                </div>
                           </div>
                       </div>
                   </div>
                   <!-- 新闻 -->
                   <div class="news">
                       <div class="news-frog-1"><i><img src="/images/XJ.png" alt=""></i><span>讲坛新闻</span></div>
                       <div class="news-frog-2">
                           <table class="news_table">
                               <tbody>
                                   <tr>
                                       <td>
                                           <div class="news_frog_title">
                                           <a href="#"> 潘祥辉:以食为道,传承中华文化</a>                                         
                                           </div>
                                           <div class="news_frog_content">
                                            <a href="#">“我国近代文明，事事皆落人之后，惟饮食一道之进步，至今尚为文明各国所不及”近日，南京大学新闻传播学教授潘祥辉先生做客第551期孔目湖讲坛，为我们带来一场名为《食以载道:中国传统饮食文化与传播》的精彩讲...</a>
                                            
                                           </div>
                                       </td>
                                   </tr>
                                   <tr>
                                    <td>
                                        <div class="news_frog_title"><a href="#">杨凤仙:魅力汉字,源远流长</a></div>
                                        <div class="news_frog_content">
                                            <a href="#">近日，中国政法大学人文学院中文系教授杨凤仙女士做客第550期孔目湖讲坛，为听众带来了题为《汉字魅力》的精彩讲座。汉字的来源与演变讲座伊始，杨凤仙为我们介绍了汉字的由来，即于河南安阳发现的甲骨文字。中华...</a>
                                        </div>
                                    </td>
                                   </tr>
                                   <tr>
                                    <td>
                                        <div class="news_frog_title"><a href="#">李晓东:古埃及的建筑与壁画艺术</a></div>
                                        <div class="news_frog_content">
                                           <a href="#"> 一提到埃及，人们首先想到的是金字塔，其次是古埃及神秘的壁画。古埃及，四大文明古国之一，位于非洲东北部尼罗河中下游（今中东地区）﹐是世界古国中的古国。李晓东教授就曾多次参加埃及的考古，讲座伊始·教授...</a>
                                        </div>
                                    </td>
                                   </tr>
                               </tbody>
                           </table>
                       </div>
                       <div class="more">
                           <a href="#">
                               <span>
                                   <img src="/images/icon_more_1.gif" alt="">
                               </span>
                           </a>
                       </div>
                   </div>
                   <!-- /新闻 -->
                   <!-- 视频 -->
                   <div class="video">
                       <div class="video-frog-1"><i><img src="/images/V.png" alt=""></i><span>讲坛视频</span></div>
                       <div class="video-frog-2">
                           <div class="video_frog_2_a">
                            <table class="video_table">
                                <tbody>
                                        <tr>
                                            <td>
                                                <a href="#">
                                                    <img src="/images/V1.jpg" alt="" class="video_img">
                                                </a>
                                            </td>
                                            <td>
                                                <a href="#">
                                                <img src="/images/V2.jpg" alt="" class="video_img">
                                                </a>
                                            </td>
                                            <td>
                                                <a href="#">
                                                    <img src="/images/V3.jpg" alt="" class="video_img">
                                                </a>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <a href="#" title="刘军伍作品：纪录片《回家》">
                                                刘军伍作品：纪录片...
                                                </a>
                                            </td>
                                            <td>
                                                <a href="#" title="李工真：中西大学比较">
                                                    李工真：中西大学比较
                                                    </a>
                                            </td>
                                            <td>
                                                <a href="#" title="第362期：学会恋爱">
                                                    第362期：学会恋爱
                                                    </a>
                                            </td>
                                        </tr>
                                    </tbody>
                            </table>
                            </div>
                       </div>
                   </div>
                   <!-- /视频 -->
               </div> 
               <!-- /右侧内容 -->
           </div>
           <!-- /内容 -->
           <div class="footer">
               <hr>
               <p>
                   Proered by:华东交通大学党委宣传部 技术支持：计算机紧急响应组
                   <br>
                   "Copyright 2013 By[kmh.ecjtu.jx.cn]. All right reserved"
               </p>
           </div>
       </div>
   </div>
    
</template>

<script>


export default{
    
}
</script>

<style scoped>
      *{
             margin: 0;
             padding: 0;
         }
         li{
         list-style-type: none;
         }
         a{
         text-decoration: none;
         }
         span{
             font-size: 14px;
         }
         .main{
             width: 1000px;
             height: 1466px;
             margin: 0 auto;
             background-image:url(/images/background.jpg);
             
         }
         .top{
             width: 1000px;
             height: 130px;
         }
         .KongMuHu-logo{
             width: 500px;
             height: 130px;
             float: left;
         }
         .empty{
             background-color: rgb(226, 16, 16);
             width: 500px;
             height: 130px;
             float: left;
         }
         .menu{
             height: 27px;
             width: 1000px;
             background-color: #307b73;
             text-align: center;
             font-family: 黑体;
         }
         
         ul li{
             float: left;
             
             
         }
         ul li a{
             font-size: 14px;
             color: #fff;
             line-height: 22px;
             text-decoration:none;
         }
         ul li a :hover{
             color: black;
         }
         ul li a span{
             padding: 5px 28px;
             cursor: pointer;
         }
         .main-body {
         width: 1000px;
         height: 1160px;
         margin-top: 21px;
         display: flex;
         }
         .main-body-left {
             width: 275px;
             height: 1160px;
             float: left;
         }
         .announcement{
             width: 275px;
             height: 217px;
             background-color: #fbfbfb;
         }
         .announcement-frog-1{
             height: 19px;
             width: 93px;
         }
          .announcement-frog-2{
              height:190px;
              width:.272px; 
              border:1px #d1d1d1 solid; 
              margin-top:6px; 
              background-color:#fbfbfb;
          }
         .audio{
             width: 275px;
             height: 343px;
             margin-top: 11px;
             background-color: #fbfbfb;
         }
         .microblog{
             width: 275px;
             height: 543px;
             margin-top: 12px;
             /* background-color: rgb(3, 81, 248); */
         }
         .microblog-frog{
             margin-top: 3px; 
             border: 1px solid #000;
             background-color: #fbfbfb;
         }
         .main-body-right {
             width: 701px;
             height: 1160px;
             float: right;
         }
         .banner{
             height: 291px;
             width: 701px;
         }
         .banner-frog-1{
             height: 23px;
             width: 701px;
         }
         .banner-frog-2{
             width: 701px;
              height: 264px;
              /* background-color: rgb(16, 241, 46); */
         }
         .notice{
             width: 701px;
             height: 280px;
         }
         .notice-frog-1{
             height: 23px;
             width: 701px;
         }
         .notice-frog-2{
             width: 701px;
             height: 255px;
             background-color: #fbfbfb;
         }
         .news{
             width: 701px;
             height: 301px;
             margin-top: 15px;
             background-color: #FBFBFB;
         }
         .news-frog-1{
             height: 23px;
             width: 701px;
         }
         .news-frog-2{
             width: 701px;
         }
         .video{
             width: 701px;
             height: 224px;
             margin-top: 35px;
         }
         .video-frog-1{
             height: 23px;
             width: 701px;
         }
         .video-frog-2{
             width: 701px;
             height: 194px;
             background-color: #fbfbfb;
         }
         .footer{
             font-size: 12px;
             line-height: 22px;
             height: 40px;
             color: #8f8f8f;
             width: 1000px;
             margin-top: 8px;
             margin-left: auto;
             margin-right: auto;
             text-align: center;
         }
         /* ************************************************************************************************************************************** */
         .tu{
             width: 216px;
             float: left;
         }
         .text{
             width: 455px;
             float: right;
         }
         .text .text-title{
             width: 455px;
         }
         .text .text-content{
             width: 455px;
             position: relative;
             top: 6px;
         } 
/* ************************************************************************************************************************************** */ 
         .news_table{
            border-collapse: collapse;
            border-spacing: 0;
         }
        .news_frog_title{
            font-size: 14px;
            font-weight: bold;
            color: #307B74;
            font-family: 黑体;
        }
        .news_frog_title a{
            font-size: 14px;
            font-weight: bold;
            color: #307B74;
            font-family: 黑体; 
        }
        .news_frog_content a{
            font-size: 12px;
            color: #494949;
        }
        .more a span{
            display: block;
            float: right;
        }
        .video_table{
            border-collapse: collapse;
            border-spacing: 0;
        }
        .video_frog_2_a table td{
            width: 224px;
            text-align: center;

        }
        .video-frog-2 a{
            font-size: 12px;
            line-height: 22px;
            text-decoration: none;
            color: #000;    
        }
        .video_frog_2_a{
            height: 142px;
            width: 96%;
        }
        .video_img{
            width: 160px;
            height: 120px;
        }
        /* ****************************************************************************************************************************** */
        /* announced */
        .announ{
            width: 275px;
            
        }
        .laba{
            width: 23px;
            height: 23px;
            float: left;
            background-color: burlywood;
        }
        .announ_content{
            float: left;
            width: 252px;
            height: 23px;
            border-bottom: 1px dashed black;
            background-color: chartreuse;
        }
        /* .announ_title{
            width: 200px;
            height: 23px;
           
           
        }
        .announ_data{
            width: 34px;
            height: 23px;
            
            
        } */
        .audio_tu{
            width: 275px;
            height: 20px;
        }
        .audio_aud{
            width: 275px;
            height: 22px;
            border-bottom: 1px dashed #000;
            
        }
        .audio_title{
            width: 225px;
            height: 20px;
            float: left;
            background-color: coral;
        }
        .audio_date{
            width: 50px;
            height: 20px;
            float: right;
            background-color: crimson;
        }
        .audio_more a span{
            display: block;
            float: right;

        }
        /* ***************************************** */
        .mic_blog{
            width: 275px;
            height: 23px;
            background-color: darkgoldenrod;
        }
        .mic_blog_logo{
            width: 23px;
            height: 23px;
            float: left;
            background-color: firebrick;
        }
        .mic_blog_title{
            width: 252px;
            height: 23px;
            float: right;
            background-color: gainsboro;
        }
        .mic_weibo{
            width: 275px;
            height: 90px;
            position: relative;
            background-color: hotpink;
            
        }
        .mic_weibo_logo{
            width: 50px;
            height: 50px;
            position: relative;
            top: 20px;
            /* bottom: 40px; */
            left: 30px;
            background-color: rgb(14, 14, 236);
        }
        .mic_weibo_title{
            width: 150px;
            height: 20px;
            position: relative;
            top: -30px;
            left: 83px;
            background-color: rgb(4, 245, 153);

        }
        .mic_weibo_gz{
            width: 80px;
            height: 25px;
            position: relative;
            bottom:  25px;
            left: 83px;
            background-color: red;
        }
        .mic_interact{
            width: 275px;
            height: 210px;
            background-color: salmon;
        }
        .mic_fans{
            width: 275px;
            height: 210px;
            background-color: springgreen;
        }
    </style>